// 构造函数
function Page(obj){
    this.el = this.getEl(obj.el);   // 大盒子
    this.datas = obj.datas;   // 数据
    this.copyData = [...this.datas]  // 备份数据
    this.page = obj.page || 1;   // 初始页码值
    this.pageSize = this.$("#count" , this.el).value ;  // 每页条数
    this.totalPage = Math.ceil(this.copyData.length / this.pageSize); // 求得最大页码值
    this.curData = this.copyData.slice( ( this.page - 1 ) * this.pageSize , this.page * this.pageSize ) // 当前数据
    // 规律: 开始 = ( 当前页码值 - 1 ) * 每页条数
    //       结束 = 页码值 * 条数
    // 5  1  0 - 5
    // 5  2  5 - 10
    // 5  3  10 - 15
    // 初始化页面
    this.init();
}

// 原型对象
Page.prototype.init = function(){
    // 渲染表格数据
    this.render();
    // 渲染页码值
    this.renderPage();
    // 绑定事件  
    this.bindEvent()
}
// 渲染数据
Page.prototype.render = function(  ){
    this.tbody = this.$("#tab tbody",this.el);
    this.tbody.innerHTML = this.curData.map((obj,i) => {
        return `<tr>
                    <td>${obj.name}</td>
                    <td>${obj.age}</td>
                    <td>${obj.sorc}</td>
                    <td>${obj.level}</td>
                </tr>`
    }).join('')
}
// 渲染页码值
Page.prototype.renderPage = function( ){
    this.pagelist = this.$("ul",this.$(".page_box"));
    // 用于拼接页码值
    var lis = '';
    for ( var j = 1 ; j <= this.totalPage ; j++ ){
       lis += `<li class=${this.page === j ? 'cur' : ''}>${j}</li>`
    }
    this.pagelist.innerHTML = lis;
    this.lis = this.gets("li" , this.pagelist)
    this.$(".prev").disabled = this.page == 1
    this.$(".next").disabled = this.page == this.totalPage
}
// 绑定事件
Page.prototype.bindEvent = function(){
    // 底部页码值 和 上下
    this.clickPage()
    // 改变条数
    this.changeCount()
    // 排序
    this.sortFn()
    // 回车 or 按钮 搜索
    this.keyFn()
}
// 底部页码值 和 上下  直接事件委托
Page.prototype.clickPage = function(){
    this.$(".page_box").addEventListener("click" , (e) => {
        var target = e.target;  // 获取事件源
        // 判断事件源是页码值  li
        if(target.nodeName === "LI"){
            // 修改页码值为当前点击的内容
            this.page = target.innerHTML
            this.tabTbodyFn( target )
        }
        // 判断事件源是 上
        if(target.className === "prev"){
            // 当前页码值 --
            this.page--
            this.tabTbodyFn( this.lis[this.page - 1] )
        }
        // 判断事件源是 下
        if(target.className === "next"){
            // 当前页码值 ++
            this.page++
            this.tabTbodyFn( this.lis[this.page - 1] )
        }
    })
}
// 给条数 绑定change事件 change -> 内容发生改变时触发
Page.prototype.changeCount = function(){
    this.$("#count").addEventListener("change" , () => {
        // 修改每页的条数
        this.pageSize = this.$("#count").value ;  // 每页条数
        // 重置当前页
        this.page = 1;
        // 重新截取数据 
        this.curData = this.copyData.slice( ( this.page - 1 ) * this.pageSize , this.page * this.pageSize ) 
        // 重新渲染
        this.render()
        // 重新计算最大页码值
        this.totalPage = Math.ceil(this.copyData.length / this.pageSize); 
        // 重新渲染页码值
        this.renderPage()
    })
}
// 排序
Page.prototype.sortFn = function(){
    this.$("#order").addEventListener("change" , () => {
        // 获取下拉框的值
        var val = this.$("#order").value;
        // 判断如果当前值是 -1  表示 请选择  啥都不干
        if(val == -1) return ;
        //年龄
        if(val === "age"){
            this.copyData.sort((a,b) => a.age - b.age)
        }
        //分数  
        if(val === "sorc"){
            this.copyData.sort((a,b) => a.sorc - b.sorc)
        }
        //等级  str.charCodeAt(index)  获取字符串指定位置字符的uniCode编码值  a->97  A->65  0->48
        if(val === "level"){
            this.copyData.sort((a,b) => a.level.charCodeAt(0) - b.level.charCodeAt(0))
        }
        
        //名字  str1.localeCompare(str2)  将汉字转成拼音在排序
        if(val === "name"){
            this.copyData.sort((a,b) => a.name.localeCompare(b.name))
        }
        this.curData = this.copyData.slice( ( this.page - 1 ) * this.pageSize , this.page * this.pageSize ) // 当前数据
        this.render()
    })
}
// 搜索
Page.prototype.keyFn = function(){
    this.$("#search").addEventListener("keydown" , e => {
        // 判断是回车 13
        if(e.keyCode === 13){
            // 获取输入框的值
            var val = this.$("#search").value.trim();
            // 没有输入 阻断向下    
            if(!val) return ;
            // 在所有数据中 查找与 val 相关的值
            // str.includes(val)  检测是否包含指定的值  返回布尔值
            this.copyData = this.datas.filter(obj => obj.name.includes(val))
            // 判断没有相关信息
            if(this.copyData.length === 0) return alert("没有相关信息 重新输入")
            // 重置
            // 页码值
            this.page = 1
            // 重新截取数据
            this.curData = this.copyData.slice( ( this.page - 1 ) * this.pageSize , this.page * this.pageSize )
            // 重新获取最大页码值
            this.totalPage = Math.ceil(this.copyData.length / this.pageSize)
            // 重新渲染
            this.render()
            this.renderPage()
            // 清空输入框的值
            this.$("#search").value = ""
        }
    })
}
// 切换数据 和  页码值 上下 等高亮的情况
Page.prototype.tabTbodyFn = function(target){
    // 重新截取数据
    this.curData = this.copyData.slice( ( this.page - 1 ) * this.pageSize , this.page * this.pageSize ) 
    // 重新渲染
    this.render()
    // 排他
    this.$(".cur").classList.remove("cur")
    target.classList.add("cur")
    // 判断上下可用情况
    this.$(".prev").disabled = this.page == 1
    this.$(".next").disabled = this.page == this.totalPage
}



// 获取元素
Page.prototype.$ = function(el,parent){
    parent = parent || document;
    return parent.querySelector(el);
}
Page.prototype.gets = function(el,parent){
    parent = parent || document;
    return [...parent.querySelectorAll(el)]
}
// 判断传入参数是否正确
Page.prototype.getEl = function(el){
    if ( el.nodeType === 1 ){
        return el
    }else if ( typeof el === "string" ){
        return this.$(el)
    }else {
        throw new Error("el参数不正确")
    }
}

// 实例化对象
var page1 = new Page ({
    el: document.querySelector(".wrap"),
    datas: datas ,
    page : 5
})
